<style>
    .price {
        margin-bottom: 5px;
        display: block;
        float: left;
        width: 100%;
    }

    .price i {
        font-size: 30px;
        cursor: pointer
    }

    .layui-input-block input {
        padding-left: 10px;
        height: 38px;
        margin-right: 5px;
        line-height: 38px;
        line-height: 36px \9;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        border-radius: 2px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="<?=url('goods/add');?>">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-disabled"value="<?php foreach($cat_list as $k=>$v):?><?php if($k != 0):?>-><?php endif;?><?=$v["cat_title"]?><?php endforeach;?>" />
                        <input type="hidden" name="cat_id" value="<?=$v['id']?>"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入商品标题"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">宣传语</label>
                    <div class="layui-input-block">
                        <input type="text" name="xuchuan_title"   placeholder="请输入宣传语" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商家</label>
                    <div class="layui-input-block">
                        <select name="shop_id">
                            <option value="0">请选择</option>
                            <?php foreach($shop_list as $key => $v):?>
                            <option value="<?=$v['id']?>"  ><?=$v['name']?></option>
                            <?php endforeach;?>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" required lay-verify="required" placeholder="请输入价格"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">成本价</label>
                    <div class="layui-input-block">
                        <input type="text" name="cost_price" required lay-verify="required" placeholder="请输入成本价"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">抵扣积分</label>
                    <div class="layui-input-block">
                        <input type="text" name="point" value="0" required lay-verify="required" placeholder="请输入抵扣积分" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">鼓励金</label>
                    <div class="layui-input-block">
                        <input type="text" name="gulijin_money" value="0" required lay-verify="required" placeholder="请输入鼓励金" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">零售商服务奖</label>
                    <div class="layui-input-block">
                        <input type="text" name="lingshou_money" value="0" required lay-verify="required" placeholder="请输入零售商服务奖" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">批发商服务奖</label>
                    <div class="layui-input-block">
                        <input type="text" name="pifa_money" value="0" required lay-verify="required" placeholder="请输入批发商服务奖" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">代理商服务奖</label>
                    <div class="layui-input-block">
                        <input type="text" name="daili_money" value="0" required lay-verify="required" placeholder="请输入代理商服务奖" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyword" placeholder="请输入关键词" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="description" placeholder="请输入描述" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">封面图</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="myupimg">
                            上传单独
                        </button>
                        <input type="hidden" name="pic" value=""/>
                        <div style="display:inline-block;position:relative;">
                            <span style="position:absolute;right:-15px; top:-15px;cursor:pointer;color:#ccc;font-size:24px;display:none;"
                                  id="closeimg">x</span>
                            <img id="pic" height=50 src=""/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">橱窗图</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="multiplepics">
                                <i class="layui-icon">&#xe67c;</i>上传多图
                            </button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list" id="multiplepicsshow"></div>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设置规格</label>
                    <input type="hidden" value="[]" id="spec" name="spec"/>
                    <div class="layui-input-block">
                        <div class="layui-btn layui-btn-xs layui-btn-normal" onclick="addSpec(this)"><i
                                class="layui-icon">&#xe654;</i><cite>添加规格</cite></div>
                        <ul class="attr">
                            <?php foreach($spec_list as $k=>$v): ?>
                            <li>
                                <input type="text" class="one" name="attr_name[]" value="<?=$v['title']?>">
                                <input type="text" class="two" placeholder="多个值用逗号隔开" name="attr_value[]">
                                <i onclick="remove(this)" class="layui-icon">-</i>
                            </li>
                            <?php endforeach;?>
                        </ul>
                        <div class="layui-btn fr layui-btn-sm layui-btn-normal" onclick="create_attr()">生成规格预览</div>
                        <div id="attr_view">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详情</label>
                    <div class="layui-input-block">
                        <script id="container" name="content" type="text/plain"></script>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">属性</label>
                    <div class="layui-input-block">
                        <textarea name="attr" placeholder="格式: 品牌:耐克; 产地:美国;" class="layui-textarea"></textarea>
                        <div class="layui-form-mid layui-word-aux">冒号隔开属性和值，多个属性以分号隔开</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">厂家信息</label>
                    <div class="layui-input-block">
                        <textarea name="changjia_info" placeholder="" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮费</label>
                    <div class="layui-input-block">
                        <input type="text" name="postage" placeholder="请输入邮费" value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="0" title="上架" checked>
                        <input type="radio" name="status" value="1" title="下架">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="myform">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'upload'], function () {
        var $ = layui.$
            , upload = layui.upload
            , form = layui.form;
        form.render();
        var ue = UE.getEditor('container');
    });
</script>

<script>
    /**
     * 添加规格
     * @param e
     */
    function addSpec(e) {
        var contents = `
	<li>
		<input type="text" class="one" name="attr_name[]" value="">
		<input type="text" class="two" placeholder="多个值用逗号隔开" name="attr_value[]">
		<i onclick="remove(this)" class="layui-icon">-</i>
	</li>
	`;
        $(e).next().append(contents);
    }

    function remove(e) {
        if ($(".attr li").length == 1) {
            layer.msg('至少需要一个规格');
            return false;
        }
        $(e).parent("li").remove();
    }

    /**
     * 生成规格预览
     */
    function create_attr() {
        var attr_list = {};//规格名称列表
        $("input[name='attr_name[]']").each(function (i, e) {
            attr_list[i] = $(e).val();
        })
        //规格值列表
        var value_list = {};
        $("input[name='attr_value[]']").each(function (i, e) {
            value_list[i] = $(e).val();
        })
        $.ajax({
            url: "<?=url('goodsprice/countattr')?>",
            method: 'post',
            dataType: 'json',
            data: {attr_list: attr_list, value_list: value_list},
            success: function (rs) {
                data = { //数据
                    "title": "规格预览"
                    , "attr_list": rs.data.spec
                    , "attr_value_list": rs.data.arr
                };
                $("#spec").val(JSON.stringify(rs.data.spec));
                layui.use('laytpl', function () {
                    var laytpl = layui.laytpl;
                    var getTpl = attr_script.innerHTML, view = document.getElementById('attr_view');
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                });
            }
        });

    }
</script>

<script type="text/html" id="attr_script">
    <table class="layui-table">
        <thead>
        <tr>
            {{# layui.each(d.attr_list, function(index, item){ }}
            <th>{{ index }}</th>
            {{# }); }}
            <th>库存</th>
            <th>价格</th>
            <th>商家编号</th>
            <th>商家条形码</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.attr_value_list, function(index, item){ }}
        <tr>
            {{# var arr = item.split('_');}}
            {{# layui.each(arr, function(i, e){ }}
            <td>{{ e }}</td>
            {{# }); }}
            <td><input type="text" style='width: 100px' class='layui-input' name="{{ item }}_stock[]" value="100"/></td>
            <td><input type="text" style='width: 100px' class='layui-input' name="{{ item }}_price[]" value="100"/></td>
            <td><input type="text" style='width: 150px' class='layui-input' name="{{ item }}_shop_no[]" value=""/></td>
            <td><input type="text" style='width: 150px' class='layui-input' name="{{ item }}_shop_num[]" value=""/></td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
